<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <title>大众点评</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="./css/element.css">
  <link href="./css/main.css" rel="stylesheet">
  <link href="./css/info.css" rel="stylesheet">

  <style type="text/css">
      .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2), .el-tabs--bottom .el-tabs__item.is-top:nth-child(2), .el-tabs--top .el-tabs__item.is-bottom:nth-child(2), .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
          padding-left: 15px;
		
		 
      }

      .el-tabs, .el-tab-pane {
          height: 100%;
      }

      .el-tabs__header {
          height: 10%;
      }

      .el-tabs__content {
          height: 90%;
      }
	   b,span{
	   
		font-family:"Times New Roman" ,Times, serif;
	  }
	  <!--在同一平行 -->
	  div{
	  white-space: nowrap
	  }
	  #bTitle{
	     align-items: center;
		font-size:10px;
	  
	  }
	  .setcount{
	  font-weight: bold;
	   font-size: 15px;
	   color: red;
	  }
	  .setTimeSize{
	     font-size:1%;
		 font-family:"Lucida Handwriting", Times, serif;
		 color: maroon;
	    
	}
	.careAndFollow{
	   font-size:15px;
	   color:black;
	   font-weight:bold;
	
	}

	
	
  </style>

</head>

<body>
<div id="app">

  <div class="header">
    <div class="header-back-btn" @click="goBack"><i class="el-icon-arrow-left"></i></div>
    <div class="header-title">个人主页&nbsp;&nbsp;&nbsp;</div>
  </div>
  
  <div class="basic">
   
    <div class="basic-icon">
      <img :src="user.icon || '/imgs/icons/default-icon.png'" alt="">
    </div>
    <div class="basic-info">
      <div class="name" >{{user.nickName}}<span  v-if="oneUser" style="color:red" >VIP{{this.oneUser.level||'0'}}</span>
	    <span style="color:blue" v-else>VIP0</span>
</div>
      <span v-if="this.oneUser">{{this.oneUser.city}}</span>
	  <span v-else>中国大陆</span>
	  <span v-if="this.oneUser">积分:{{this.oneUser.credits||'0'}}</span>
	  <span v-if="this.oneUser">余额:{{this.oneUser.hbCounts||'0'}}元</span> 
	  <!-- <span class="careAndFollow">{{this.follows.length||'0'}}</span><span>关注我的</span> -->
	  <!-- <span class="careAndFollow">{{this.myCares.length||'0'}}</span><span>我关注的</span> -->
      <div class="edit-btn" @click="toEdit">
        编辑资料
      </div>
	 
    </div>
	 
    <div class="logout-btn" @click="logout">
      退出登录
    </div>
	 
  </div>


		<div style="font-size:14px" ><span  >总赞数:</span><b class="setcount">{{this.oneselfLike}}❤</b></div>
		
	  
	  个人简介:
    <span class="setTimeSize" v-if="this.oneUser!==''">{{this.oneUser.introduce}}</span>
    <span v-if="this.oneUser===''">添加个人简介，让大家更好的认识你 <i class="el-icon-edit"></i></span>
	
  
  <div class="content">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="博客" name="1">
	    <span slot="label" >博客
        
          <el-badge :value="blogNum" class="item" type="success">
          </el-badge>
		  
		  </span>
	
        <!-- <div v-for="b in blogs" :key="b.id" class="blog-item" style=";overflow-y:auto"> -->
          <!-- <div class="blog-img" @click="toBlogDetail(b)"><img :src="b.images.split(',')[0]" alt=""></div> -->
          <!-- <div class="blog-info"> -->
            <!-- <div class="blog-title">{{b.title}}</div> -->
            <!-- <div class="blog-liked"><img src="/imgs/thumbup.png" alt=""> {{b.liked}}</div> -->
            <!-- <div class="blog-comments"><i class="el-icon-chat-dot-round"></i> {{b.comments}}</div> -->
          <!-- </div> -->
        <!-- </div> -->
			 <div class="f-list" @scroll="onScroll">

				 <div class="b-box" v-for="(b,index) in blogs" :key="b.id">
				
				   <div class="b-foot">
				       <p v-if="this.blogs">共有博客:<b class="setcount" >{{this.blogs.length}}</b>篇</p>
						 <div class="blog-img" @click="toBlogDetail(b)"><img :src="b.images.split(',')[0]" alt="" style="size:100%"></div>
						
							 <div class="blog-user-name" style="color:black" >《{{b.title}}》   <div class="blog-liked" style="color:black"><img src="/imgs/thumbup.png" alt="">{{b.liked}} </div>
						         <div class="blog-comments" ><i class="el-icon-chat-dot-round"></i> {{b.comments}}</div><span > {{b.createTime}} </span>
							 </div>	
							
				</div>
							
			   </div>
		  </div>
		
      </el-tab-pane>
    
      <el-tab-pane label="粉丝" name="3">
		<span slot="label">粉丝
        
          <el-badge :value="followNum" class="item" type="danger">
          </el-badge>
          
        </span>
	       <!--查询粉丝 -->
		  
			 <div class="f-list" @scroll="onScroll">
			 <p v-if="this.follows">共有粉丝:<b class="setcount" >{{this.follows.length}}</b>人</p>
				 <div class="f-box" v-for="(f,index) in follows" :key="f.id">
				
				   <div class="f-foot">
				    
						 <div class="f-user-icon" @click="toOtherInfo(f)"><img :src="f.icon || '/imgs/icons/default-icon.png'" alt=""></div>
							 <div class="blog-user-name"  >{{f.nickName}}   <div class="blog-liked" style="color:black"><img src="/imgs/thumbup.png" alt=""> {{f.sumLikes}}</div>
							 </div>
							<div class="setTimeSize" > 关注你的时间:{{f.createTime}} </div>
				</div>
							
			   </div>
		  </div>
	  </el-tab-pane>
	  
	  <el-tab-pane label="关注" name="4">
	        <span slot="label">关注
        
          <el-badge :value="careNum" class="item" type="success">
          </el-badge>
          
        </span>
			 <div class="f-list" @scroll="onScroll">
			  <p v-if="this.myCares">我关注了<b class="setcount" >{{this.myCares.length}}</b>人</p>
				 <div class="f-box"  v-for="(f,index) in myCares" :key="f.id">
				   <div class="f-foot">
						 <div class="f-user-icon"  @click="toOtherInfo(f)"  ><img :src="f.icon || '/imgs/icons/default-icon.png'" alt=""></div>
												 <div class="blog-user-name"  v-if="f.nickName">{{f.nickName}}
												  <div class="blog-liked" style="color:black"><img src="/imgs/thumbup.png" alt=""> {{f.sumLikes}}</div>
							 <!-- <span style="color:black">总获赞:</span><span class="setcount">{{f.sumLikes}}❤</span>  -->
							 </div>
							  <div class="blog-user-name"  style="color:red" v-else>该账号已注销!
							 </div>
					
							<div class="setTimeSize"> 我关注的时间:{{f.createTime}} </div>
				</div>
							
			   </div>
		  </div>
	  </el-tab-pane>
	    <el-tab-pane label="喜欢" name="5"  >
	       <span slot="label">喜欢
        
          <el-badge :value="likeNum" class="item" type="danger">
          </el-badge>
          
        </span>
			 <div class="f-list" @scroll="onScroll" >
			  <p v-if="this.likeBlogs">共喜欢:<b class="setcount" >{{this.likeBlogs.length}}</b>篇博客(点击标题查看详情)</p>
				 <div class="f-box"  v-for="(f,index) in likeBlogs" :key="f.id">
				   <div class="f-foot" >
						 <div class="f-user-icon" @click="toOtherInfo(f)"><img :src="f.icon || '/imgs/icons/default-icon.png'" alt=""></div>
							 <div class="blog-user-name"  >{{f.nickName}} </div>
							
							<div  id="bTitle"  @click="toBlogDetail(f)"> 标题:<b >{{f.title}}</b> <span style="color:red">获赞:{{f.likes}}❤</span></div>
							<div class="setTimeSize" > 我点赞的时间:{{f.createTime}} </div>
				</div>
							
			   </div>
		  </div>
	  </el-tab-pane>
      <el-tab-pane label="关注的人博客" name="6">
        <div class="blog-list" @scroll="onScroll">
		   <p  v-if="this.blogs2">共有新博客:<b class="setcount" >{{this.blogs2.length}}</b>篇</p>
          <div class="blog-box" v-for="b in blogs2" :key="b.id">
            <div class="blog-img2" @click="toBlogDetail(b)"><img :src="b.img" alt=""></div>
            <div class="blog-title">标题:<b>《{{b.title}}》</b></div>
            <div class="blog-foot">
              <div class="blog-user-icon" @click="toOtherInfo(b)" ><img :src="b.icon || '/imgs/icons/default-icon.png'" alt=""></div>
              <div class="blog-user-name">{{b.name}}</div>
              <div class="blog-liked" @click="addLike(b)">
                <svg t="1646634642977" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="2187" width="14" height="14">
                  <path
                      d="M160 944c0 8.8-7.2 16-16 16h-32c-26.5 0-48-21.5-48-48V528c0-26.5 21.5-48 48-48h32c8.8 0 16 7.2 16 16v448zM96 416c-53 0-96 43-96 96v416c0 53 43 96 96 96h96c17.7 0 32-14.3 32-32V448c0-17.7-14.3-32-32-32H96zM505.6 64c16.2 0 26.4 8.7 31 13.9 4.6 5.2 12.1 16.3 10.3 32.4l-23.5 203.4c-4.9 42.2 8.6 84.6 36.8 116.4 28.3 31.7 68.9 49.9 111.4 49.9h271.2c6.6 0 10.8 3.3 13.2 6.1s5 7.5 4 14l-48 303.4c-6.9 43.6-29.1 83.4-62.7 112C815.8 944.2 773 960 728.9 960h-317c-33.1 0-59.9-26.8-59.9-59.9v-455c0-6.1 1.7-12 5-17.1 69.5-109 106.4-234.2 107-364h41.6z m0-64h-44.9C427.2 0 400 27.2 400 60.7c0 127.1-39.1 251.2-112 355.3v484.1c0 68.4 55.5 123.9 123.9 123.9h317c122.7 0 227.2-89.3 246.3-210.5l47.9-303.4c7.8-49.4-30.4-94.1-80.4-94.1H671.6c-50.9 0-90.5-44.4-84.6-95l23.5-203.4C617.7 55 568.7 0 505.6 0z"
                      p-id="2188" :fill="b.isLike ? '#ff6633' : '#82848a'"></path>
                </svg>
                {{b.liked}}
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>

    </el-tabs>
  </div>
  <foot-bar :active-btn="4"></foot-bar>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="./js/element.js"></script>
<script src="./js/common.js"></script>
<script src="./js/footer.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
	followNum:0,//粉丝数量
	careNum:0,//关注数量
	likeNum:0,//喜欢的数量
	blogNum:0,//博客数量
      user: "",
      activeName: "1",
      info: {},
	  oneUser:{},//个人信息
	  oneselfLike: "1",//我获得的喜欢
      blogs: [],
	  likeBlogs: [],//喜欢的博客
	  follows: [], //粉丝列表
	  myCares: [], //我关注的人
      blogs2: [], // 关注的人的播客
      params: {
        minTime: 0, // 上一次拉取到的时间戳
        offset: 0, // 偏移量
      },
      count: 5,
      isReachBottom: false,
    },
    created() {
	 this.querymyUserInfo();//查询个人信息info
      this.queryUser();
	  this.queryFollows();  //查询粉丝
	  this.queryMyCares();//查询我的关注
	//  
	  this.queryMyGetLiked();//查询我获得的喜欢
	 
	  
    }
  ,
    methods: {
      load() {
        this.count += 2;
      },
	  open1() {
        const h = this.$createElement;

        this.$notify({
          title: '友情提示',
          message: h('i', { style: 'color: teal'}, '点击头像可以查看用户  点击标题可以查看博客'),
		 
        });
      },
	  //查询userInfo信息
	  querymyUserInfo(){
	  
	   axios({
			headers: {
					   'Content-Type': 'application/json; charset=utf-8'
				   },
			 method: 'post',
			url:'/userInfo/oneUser',
			}).then( ({data})=>{
		  
		  this.oneUser=data;
		  }) 
	  },
	  
	  //查询喜欢的博客
	  querylikeBlogs(){
	     axios.get("/blog/likeBlogs")
		    .then(({data}) => {
			 this.open1();
             this.likeBlogs=data
			 this.likeNum=this.likeBlogs.length;
			 })
			//.catch(this.$message.error)
	  },
	  //查询我获得的喜欢
	  queryMyGetLiked(){
	     axios.get("/blog/myGetlike")
		    .then(({data}) => {
             this.oneselfLike=data})
	  },
	  //查询我的博客
       queryBlogs() {
        axios.get("/blog/of/me")
          .then(({data}) =>  {
		  this.blogs = data;
		  this.blogNum=this.blogs.length;
		  })
          .catch(this.$message.error)
      },
	  //查询粉丝
		queryFollows(){
		   axios.get("/follow/listOfFollows")
		    .then(({data}) => {
             this.follows=data;
			 this.followNum=this.follows.length;
          })
		},
	//查询关注的人的
	queryMyCares(){
		   axios.get("/follow/myCares")
		    .then(({data}) => {
             this.myCares=data
			 this.careNum=this.myCares.length;
          })
		},
      queryBlogsOfFollow(clear) {
        if (clear) {
          this.params.offset = 0;
          this.params.minTime = new Date().getTime() + 1;
        }
        let {minTime, offset: os} = this.params;
        axios.get("/blog/of/follow", {
            params: {offset: os, lastId: minTime || new Date().getTime() + 1}
          })
          .then(({data}) => {
            if (!data) {
              return;
            }
            let {list, ...params} = data;
            list.forEach(b => b.img = b.images.split(",")[0])
            this.blogs2 = clear ? list : this.blogs2.concat(list);
            this.params = params;
          })
          .catch(e => console.log(e))
      },
      queryUser() {
        // 查询用户信息
        axios.get("/user/me")
          .then(({data}) => {
            // 保存用户
            this.user = data;
            // 查询用户详情
            this.queryUserInfo();
            // 查询用户笔记
            this.queryBlogs();
          })
          .catch(err => {
            location.href = "login.html"
          })
      },
      goBack() {
        history.back();
      },
      queryUserInfo() {
        axios.get("/user/info/" + this.user.id)
          .then(({data}) => {
            if (!data) {
              return
            }
            // 保存用户详情
            this.info = data;
            // 保存到本地
            sessionStorage.setItem("userInfo", JSON.stringify(data))
          })
          .catch(err => {
            this.$message.error(err);
          })
      },
      toEdit() {
        location.href = 'info-edit.html'
      },
      logout() {
        axios.post("/user/logout")
          .then(() => {
            // 清理session
            sessionStorage.removeItem("token")
            // 跳转
            location.href = "/"
          })
          .catch(this.$message.error)
      },
	  //tab点击事件
      handleClick(r) {
        if (r.name === '4') {
          this.queryBlogsOfFollow(true);
        }
		else if(r.name==='5'){
			this.querylikeBlogs();//查询喜欢的博客
		}else if(r.name==='3')	{
              this.queryFollows();
            }		
      },
      addLike(b) {
        axios.put("/blog/like/" + b.id)
          .then(({data}) => {
            this.queryBlogById(b);
          })
          .catch(err => {
            this.$message.error(err)
          })
      },
      queryBlogById(b) {
        axios.get("/blog/" + b.id)
          .then(({data}) => {
            b.liked = data.liked;
            b.isLike = data.isLike;
          })
          .catch(() => {
            this.$message.error
            b.liked++;
          })
      },
      onScroll(e) {
        let scrollTop = e.target.scrollTop;
        let offsetHeight = e.target.offsetHeight;
        let scrollHeight = e.target.scrollHeight;
        if (scrollTop === 0) {
          // 到顶部了，查询一次
          this.queryBlogsOfFollow(true);
        } else if (scrollTop + offsetHeight + 1 > scrollHeight && !this.isReachBottom) {
          this.isReachBottom = true
          // 再次查询下一页数据
          this.queryBlogsOfFollow();
        } else {
          this.isReachBottom = false
        }
      },
	  
      toOtherInfo(f){
        if(f.userId==this.user.id){
          location.href = "/info.html"
        }else {
          location.href = "/other-info.html?id=" + f.userId
        }
      },
	 
      toBlogDetail(f) {
        location.href = "/blog-detail.html?id=" + f.id
      }
    },

  });
</script>
</body>

</html>